<!DOCTYPE html>
<%@ taglib prefix="s" uri="/struts-tags" %>
<html lang="en">
  
<head>
    <meta charset="utf-8">
    <title>Phoenix - Forms - elements</title>
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- ===================== Touch Icons ===================== -->
    <link rel="shortcut icon" href="favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57-precomposed.png">

    <!-- ===================== CSS ===================== -->    
    <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>  
    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/bootstrap/bootstrap-responsive.min.css">    

    <!-- Site specific - CSS -->   
    <link rel="stylesheet" href="css/theme_light/prettify.css">
    <link rel="stylesheet" href="css/theme_light/jquery-ui-1.8.20.custom.css">
    <link rel="stylesheet" href="css/theme_light/formselements/chosen.css">
    <link rel="stylesheet" href="css/theme_light/formselements/dropkick.css">
    <link rel="stylesheet" href="css/theme_light/formselements/multi-select.css">    
    <link rel="stylesheet" href="css/theme_light/formselements/jquery.ibutton.css">    
    
    <!-- Common - CSS -->  
    <link rel="stylesheet" href="css/theme_light/common.css">
    <link rel="stylesheet" href="css/theme_light.css" class="style_set">
             
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

  </head>
  <body> 
    <div id="loader_cont"><img src="img/loaders/page_loader.gif"></div> 
    <div class="options_cont">
      <form name="myForm">
        <a class="options_btn" href="#">OPTIONS</a> 
        <div class="options group">
          <div>
            <p>Background image:</p>
            <ul class="background_list">
              <li><a class="current" id='bg_1' href="#">bg_1</a></li>
              <li><a id='bg_2' href="#">bg_2</a></li>
              <li><a id='bg_3' href="#">bg_3</a></li>
              <li><a id='bg_4' href="#">bg_4</a></li>
              <li><a id='bg_5' href="#">bg_5</a></li>
              <li><a id='bg_6' href="#">bg_6</a></li>
              <li><a id='bg_7' href="#">bg_7</a></li>
              <li><a id='bg_8' href="#">bg_8</a></li>
              <li><a id='bg_9' href="#">bg_9</a></li>
              <li><a id='bg_10' href="#">bg_10</a></li>
            </ul>
          </div>
          <div>
            <p>Color styling:</p>
            <ul class="color_list">
              <li><a class="current" id='c_1' href="#" title="Rose">rose</a></li>
              <li><a id='c_2' href="#" title="Orange">orange</a></li>
              <li><a id='c_3' href="#" title="Apple Green">apple_green</a></li>
              <li><a id='c_4' href="#" title="Sky Blue">sky_blue</a></li>
              <li><a id='c_5' href="#" title="Purple">purple</a></li>
            </ul>            
          </div>
          <div>
            <p>Patterns:</p>
            <ul class="pattern_list">
              <li><a class="current" id='p_1' href="#" title="Stripes Right">p_1</a></li>
              <li><a id='p_2' href="#" title="Stripes Left">p_2</a></li>
              <li><a id='p_3' href="#" title="Noise">p_3</a></li>
              <li><a id='p_4' href="#" title="Plain">p_4</a></li>              
            </ul>            
          </div>
          <div class="top_mn_setup">
            <p>Display top menu on:</p>
            <div>
              <input id="top_menu_click" checked="checked" type="radio" value="1" class="menu_show" name="top_menu_show"><label for="top_menu_click">Click</label>
              <input id="top_menu_hover" type="radio" value="0" class="menu_show" name="top_menu_show"><label for="top_menu_hover">Hover</label>
            </div>            
          </div>  
          <div class="clear_cache_cont"><a class="btn btn-mini" href="#">Clear Cache</a></div>              
        </div> 
         <button type="submit" class="btn">Sign in</button>
      </form> 
    </div>    
    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="sweet-gray sweet-go-back-from-screen">&nbsp;</span>
          </a>
          <div class="nav-collapse">            
            <ul class="nav main_nav" role="navigation">                
                <li id="mail" class="styled dropdown mail">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Mail<span class="info">2</span></a>
                  <ul class="dropdown-menu top_menu">
                      <li><a class="mn_new_msg" href="mail.html"><span>New Message</span></a></li>
                      <li><a class="mn_inbox" href="mail.html"><span>Inbox</span></a></li>
                      <li><a class="mn_outbox" href="mail.html"><span>OutBox</span></a></li>
                      <li><a class="mn_spam" href="mail.html"><span>Spam</span></a></li>
                      <li><a class="mn_trash" href="mail.html"><span>Trash</span></a></li>
                  </ul>
                </li>
                <li id="chat" class="styled chat">
                  <a data-toggle="modal" href="#chat_modal">Chat<span class="info">5</span></a>     
                </li>
                <li id="notification" class="styled dropdown notification">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Notification<span class="info">4</span></a>
                  <ul class="dropdown-menu">
                    <li>
                        <a href="#">                          
                          Lorem ipsum dolor sit amet, consectetur adipiscing elit...
                            <span>07/19/2012</span>                       
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Vivamus ut enim vitae nibh aliquet pre-tium lobortis sit amet tortor...
                            <span>07/19/2012</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Ut id dui arcu, non tempus nunc...
                            <span>07/19/2012</span>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                          Morbi faucibus suscipit nibh, ut pellen-tesque lectus pellentesque non....
                            <span>07/19/2012</span>
                        </a>
                    </li>                        
                    <li class="show_all"><a href="#">Show all notifications</a></li> 
                  </ul>
                </li>                          
            </ul> 
            <ul class="main_nav nav pull-right">                
                <li id="search" class="search"> 
                  <a href="#">Search</a> 
                  <div class="search_cont">
                      <form class="navbar-search form-search">                          
                          <input type="text" class="input-medium search-query" placeholder="Search">
                          <button type="submit">Search</button>
                      </form> 
                  </div>              
                </li> 
                <li id="settings" class="styled dropdown settings">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Settings</a>
                    <ul class="dropdown-menu top_menu">
                        <li class="show_all">Settings</li>
                        <li><a class="mn_site" href="#"><span>Site</span></a></li>
                        <li><a class="mn_admin" href="#"><span>Admin</span></a></li>
                        <li><a class="mn_mail" href="#"><span>Mail</span></a></li>
                        <li><a class="mn_user" href="#"><span>User</span></a></li>
                    </ul>
                </li>
                <li id="profile" class="styled dropdown profile">
                  <a class="dropdown-toggle" data-toggle="dropdown" href="#">Profile</a>
                    <ul class="dropdown-menu top_menu">                        
                        <li class="profile group">
                          <img src="img/general/user_1.jpg" width="50" height="50" alt="User">
                          <ul>
                            <li><strong>John Doe</strong></li>
                            <li>@johndoe</li>
                            <li><span>Administrator</span></li>
                          </ul>
                        </li>
                        <li><a class="mn_settings" href="#"><span>My Settings</span></a></li>
                        <li><a class="mn_profile" href="profile.html"><span>My Profile</span></a></li>
                        <li><a class="mn_logout" href="login.html"><span>Logout</span></a></li>
                    </ul>
                </li>                          
            </ul>           
          </div>
          <h1 class="brand"><a href="index-2.html">PHOENIX</a></h1>                                       
        </div>
      </div>
    </div>
            
    <div class="container">              
      <div class="main_content row-fluid">


        <div class="span9">
          <div class="row-fluid">
            <div class="span12">

             
              <div class="span12 no_space">

                  <div class="widget">
                    <header>
                      <h3>Inscrivez-vous</h3>
                      
                      <ul class="toggle_content">                         
                          <li class="arrow"><a href="#">Toggle Content</a></li>
                      </ul>
                    </header>
                    <s:actionerror/>
                    <form action="addUt">
                    <section class="welly form_align">                         
                        <div class="row-fluid">
                          <div class="span3">Nom:</div>
                          <div class="span9"><input type="text" name="nom"></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">email:</div>
                          <div class="span9"><input type="text" name="email"></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">Login:</div>
                          <div class="span9"><input type="text" name="login" placeholder="Placeholder text" ></div>
                        </div>  
                        <hr>
                        <div class="row-fluid">
                          <div class="span3">password:</div>
                          <div class="span9"><input type="text" name="password" placeholder="Placeholder text" ></div>
                        </div>  
                          <hr>
                        <div class="row-fluid">
                          <div class="span3">choisissez Votre Role:</div>
                          <div class="span9">
                          <s:select name="rol" data-placeholder="votre role..." cssClass="chzn-select" tabindex="2"  list="%{role}" listKey="id_role" listValue="nom_role" ></s:select>
                              
                           <!--    <span class="help-inline">Chosen plugin</span> -->
                          </div>
                        </div> 
                            <div class="form-actions">
                            <button type="submit" class="btn btn-success">Save changes</button>
                            <button class="btn btn-danger">Cancel</button>
                     </div> 
                                  
                    </section>
                 </form>
                  </div>

          

                 

                  
                  
                 
                  
              </div>

            </div>                  
          </div><!--/row-->
        
        </div><!--/span-->
      </div><!--/row-->      
      <hr>

      <footer>
        <p>&copy; LoxDesign.net - Phoenix 2012</p>
      </footer>

    </div><!--/.fluid-container-->

    <!-- ===================== CHAT - Modal ===================== -->
    <div id="chat_modal" class="chat_modal modal fade hide">
      <div class="modal-header">
        <ul>
          <li class="toggle_users"><a href="#">Show Users</a></li>
          <li class="status">
            <a class="online" href="#"><span>Status</span></a>  
            <ul>
               <li><a class="online" href="#" title="Online"><span>Online</span></a></li>
               <li><a class="away" href="#" title="Away"><span>Away</span></a></li>
               <li><a class="busy" href="#" title="Busy"><span>Busy</span></a></li>
               <li><a class="invisiblee" href="#" title="Invisible"><span>Invisible</span></a></li>
               <li><a class="offline" href="#" title="Offline"><span>Offline</span></a></li>
             </ul> 
          </li>
          <li class="chat_name">John Doe</li>
        </ul>       
        <button type="button" class="close" data-dismiss="modal">x</button>        
      </div>
      <div class="modal-body">
        <div class="msg_cont left">
          <img src="img/general/user_1.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>John Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>
        <div class="msg_cont right">
          <img src="img/general/user_2.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>Jessie Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>
        <div class="msg_cont left">
          <img src="img/general/user_1.jpg" width="50" height="50" alt="User">
          <ul>
            <li>
              <h3>John Doe:</h3> 
              <span>16 minutes ago</span>
            </li>
            <li>Aliquam iaculis volutpat ipsum ullamcorper tempus. In in dui tortor. Mauris sed volutpat
metus. Duis ut sapien sapien, id pellentesque orci. Nullam nisl metus, sodales ut laoreet 
eget, pretium porttitor quam. Sed varius vulputate lacinia. </li>
          </ul>    
        </div>        
      </div>
      <div class="modal-footer">        
        <textarea></textarea>
        <a href="#" class="btn btn-inverse">Send</a>
      </div>
    </div>

    <!-- ===================== JS ===================== -->
    <script src="js/libs/jquery-1.7.2.min.js"></script>    
    <script src="js/libs/bootstrap.min.js"></script>   
    <script src="js/libs/ios-orientationchange-fix.js"></script>      
    <script src="js/libs/jquery-ui-1.8.20.custom.min.js"></script>      
    <script src="js/common.js"></script>                 
    
    <!-- Site specific - JS --> 
    <script src="js/libs/prettify.js"></script> 
    <script src="js/plugins/formselements/jquery.maskedinput-1.3.min.js"></script> 
    <script src="js/plugins/formselements/chosen.jquery.min.js"></script> 
    <script src="js/plugins/formselements/scrollability.min.js"></script> 
    <script src="js/plugins/formselements/jquery.dropkick-1.0.0.js"></script> 
    <script src="js/plugins/formselements/jquery.multi-select.js"></script> 
    <script src="js/plugins/formselements/jquery.quicksearch.js"></script> 
    <script src="js/plugins/formselements/jquery.autogrowtextarea.js"></script> 
    <script src="js/plugins/formselements/jquery.textareaCounter.plugin.js"></script> 
    <script src="js/plugins/formselements/ui.spinner.min.js"></script> 
    <script src="js/plugins/formselements/jquery.ibutton.min.js"></script> 
    <script src="js/plugins/formselements/jquery.metadata.js"></script> 

    <script src="js/script.js"></script>
    <script src="js/specific/forms_elements.js"></script>

    <script type="text/javascript">

      var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-31818910-2']);
      _gaq.push(['_setDomainName', 'loxdesign.net']);
      _gaq.push(['_trackPageview']);

      (function() {
        var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })();

    </script>
  </body>

</html>